<template>
  <el-dialog :visible.sync="dialogVisible" title="新增购方客户档案" width="800px" :close-on-click-modal="false" :append-to-body="true" v-drag2anywhere>
     <div style="overflow: auto; padding: 5px;">
        <el-form ref="form" :model="formData" :rules="rules" label-width="100px" size="mini">
          <el-row :gutter="5">
            <el-col :span="12">
              <el-form-item label="企业名称:"  prop="title">
                <el-input v-model="formData.title" placeholder="企业名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纳税号码:"   prop="taxcode">
                <el-input v-model="formData.taxcode" placeholder="纳税号码" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册地址:"   prop="address">
                <el-input v-model="formData.address" placeholder="注册地址" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册电话:"   prop="mobile">
                <el-input v-model="formData.mobile" placeholder="联系电话" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行名称:"  prop="bankname">
                <el-input v-model="formData.bankname" placeholder="开户行名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号:"   prop="bankid">
                <el-input v-model="formData.bankid" placeholder="银行账号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="区域:" prop="region_ids">
                <el-cascader ref="cityregion"
                    expand-trigger="hover"
                    :options="regionList"
                    v-model="formData.region_ids" :props="{value:'region_id',label:'region_name'}"
                    @change="handleRegionChange">
                  </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属合作商">
                <el-select v-model="formData.supid" style="width: 100%;" @change="handleSupChanged">
                  <el-option v-for="(item,index) in suppliers" :label="item.name" :value="item.id" :key="item.id" ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" size="medium" @click="handleSave">保  存</el-button>
      </div>
    </el-dialog>
  </template>

  <script>
    export default {
      data() {
        return {
          formData: {
            title: "",
            taxcode:'',
            address:'',
            mobile:'',
            bankname: '',
            bankid: '',
            supid:'2',
            supname:'河北迈拓恒科信息技术有限公司',
            region_values:[],
            region_ids:[],
          },
          suppliers:[],
          regionList:[],
          dialogVisible: true,
          rules: {
            title: [{
              required: true,
              "message": "客户抬头不能为空",
              trigger: blur
            }],
            region_ids: [{
              type:'array',
              required: true,
              "message": "客户所属行政区域不能为空!",
              trigger: 'change'
            }]
          }
        }
      },
      mounted() {
          this.loadRegions();

      },
      methods: {
        initData(){
          this.formData={
            title: "",
            address:'',
            taxcode:'',
            bankname: '',
            bankid: '',
            supid:"2",
            supname:"河北迈拓恒科信息技术有限公司",
            region_values:[],
            region_ids:[]
          };
          this.loadSuppliers();
        },
        handleSupChanged(supid){
          var option = this.suppliers.filter(function(cur, index, a) {
            if (cur.id == supid) {
              return cur;
            }
          })[0];
          this.formData.supid=option.supid;
          this.formData.supname=option.supname;
        },
        loadSuppliers(){
          this.axios.post("api/common/supplier/list").then(res=>{
            if(res.status==200 && res.data.code==0){
              this.suppliers=res.data.list;
            }
          })
        },
        loadRegions(){
          this.axios.post("api/common/region/list").then(res=>{
            if(res.status==200 && res.data.code==0){
              this.regionList=res.data.data;
            }
          })
        },
        handleRegionChange:function(reg){
          this.formData.region_ids=reg;
          this.formData.region_values=this.$refs["cityregion"].getCheckedNodes()[0].pathLabels;
        },
        handleSave: function() {
          this.$refs.form.validate((ok) => {
            if (ok) {


              let params = {
                title: this.formData.title,
                taxcode:this.formData.taxcode,
                bankname: this.formData.bankname,
                bankid: this.formData.bankid,
                mobile:this.formData.mobile,
                supid:this.formData.supid,
                supname:this.formData.supname,
                region_ids: this.formData.region_ids,
                region_values:this.formData.region_values,
                address:this.formData.address,
              };

              this.axios.post("api/admin/unit/add", params).then((res) => {
                if (res.status == 200 && res.data.code == 0) {
                  this.$message.success(res.data.msg);
                  this.dialogVisible = false;
                  this.$emit("closeHandler");
                } else {
                  this.$alert(res.data.msg, "提示", {
                    type: 'error'
                  });
                }
                console.log(res);
              })

              return true;
            }
            return false;
          })
        }
      }
    }
  </script>

  <style scoped>

  </style>
